<template>
	<div class="player">
		<video width="300" height="200" :src="this.mvurlp" autoplay="autoplay" @click="pause">
		</video>
		<i class="icon iconfont icon-houtui" @click="last"></i>
		<div class="mvmes">
			<h3 v-if="vurl">{{vurl[imgIndexs].artistName}}</h3>
			<p class="time">
				<span>发布：2018-09-04</span>
				<span v-if="vurl">播放：{{vurl[imgIndexs].playCount}}</span>
			</p>
			<div class="icons">
				<div class="icon">
					<i class="iconfont icon-dianzan"></i>
					<span>5165</span>
				</div>
				<div class="icon">
					<i class="iconfont icon-tianjiashoucang"></i>
					<span>516</span>
				</div>
				<div class="icon">
					<i class="iconfont icon-pinglun"></i>
					<span>1455</span>
				</div>
				<div class="icon">
					<i class="iconfont icon-fenxiang"></i>
					<span>2358</span>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import play from "@/assets/img/play.png"
	import pause from "@/assets/img/pause.png"
	export default {
		name:'mvvideo',
		data(){
			return {
				imgIndexs:0,
				mvurlp:"",
				baseurl:"http://netease.bluej.cn",
				num :"10",
				vurl:"",
				isclick:"true"
			}
		},
		mounted(){
			this.geturl();
		},
		methods:{
			geturl(){
				 var urls = window.location.hash;
				 console.log(urls);
				 var imgIndex = urls.split("?")[1];
				 this.imgIndexs=imgIndex
				 
				 console.log(this.imgIndexs);
//				 console.log(this.$store.state.mvurl);
				 this.mvurlp=this.$store.state.mvurl[imgIndex];
				 console.log(this.mvurlp);
			},
			getcomment(ids){
				axios.get(this.baseurl+"/comment/mv?id="+ids)
				.then(function(res){
					console.log(res);
				});
			},
			last(){
				this.$router.go(-1);
			},
			pause(){
				var vid =document.querySelector("video");
				this.isclick=!this.isclick;
				if(this.isclick==false){
					vid.pause();
				}else{
					vid.play();
				}
				
					
				
			}
		},
		created(){
			var that= this;
			axios.get(this.baseurl+"/top/mv?limit="+that.num)
			.then(function(res){
				console.log(res);
				that.vurl=res.data.data;
				console.log(that.vurl);
				var idx = that.vurl[that.imgIndexs].id;
				that.getcomment(idx);
			});
		}
	}
</script>

<style lang="scss" scoped="">
	.player{
		width: 100%;
		.icon-houtui{
			    position: absolute;
			    top: 21px;
			    left: 10px;
			    color: #fff;
			    padding: 10px;
		}
		.mvmes{
			h3{
				text-align: left;
				margin-left: 10px;
			}
			.time{
				text-align: left;
				font-size: 15px;
				margin: 10px 0px 20px 10px;
				ma
				&:nth-chiid(2){
					margin-left: 30px;
				}
				
			}
			.icons{
				width: 100%;
				display: flex;
				justify-content: space-around;
				.icon{
					display: flex;
					flex-direction: column;
					.iconfont{
						font-size: 20px;
					}
					span{
						font-size:12px ;
					}
				}
			}
		}
	}
</style>